<template>
  <div>
    <el-dialog :visible="isShow" title="分配权限" @close="closeEvent">
      <el-tree ref="tree" :data="list" :props="{label: 'name'}" show-checkbox check-strictly :default-checked-keys="defaultKeys" node-key="id" />
      <template #footer>
        <div>
          <el-button @click="closeEvent">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!--check-strictly 是否父子选择关联,默认值是false
    show-checkbox  复选框
    :default-checked-keys="defaultKeys" 默认选择的项对应的值(值来自node-key对应的字段) 累加选中
    this.$refs.el-tree的ref值,setCheckedKeys([需要选中想的值]) 可以设置需要选中的项
    this.$refs.el-tree的ref值,getCheckedKeys() 获取已选中项的结构
      -->
  </div>
</template>

<script>
// 获取数据
import { sysPermission } from '@/api/permission.js'
// 获取数据详情
import { sysRoleById, sysRoleassignPrem } from '@/api/setting'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: '',
      list: [],
      defaultKeys: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysPermission()
      this.list = this.changeData(res.data, '0')
      console.log(res, '分配权限')
    },
    changeData(arr, str) {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 关闭弹框
    closeEvent() {
      this.$emit('update:isShow', false)
      this.$refs.tree.setCheckedKeys([])
    },
    // 获取角色详情
    async getRoleInfo(row) {
      this.id = row.id
      const res = await sysRoleById(row.id)
      this.$refs.tree.setCheckedKeys(res.data.permIds)
      console.log('角色详情', res)
    },
    async submit() {
    // 勾选选中的数据
      await sysRoleassignPrem(this.id, this.$refs.tree.getCheckedKeys())
      this.$message.success('分配权限成功')
      this.closeEvent()
    }
  }
}
</script>

<style>

</style>
